<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item prop="merchantId">
        <el-select v-model="queryParams.merchantId" style="width: 220px" placeholder="请选择商户"
                   @keyup.enter.native="handleQuery">
          <el-option v-for="mer in merchantList" :key="mer.merchantId"
                     :label="mer.defindName ? mer.defindName : mer.merchantName"
                     :value="mer.merchantId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="globalItemName">
        <el-input v-model="queryParams.globalItemName" placeholder="请输入商品名称/ID" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item prop="globalItemSku">
        <el-input v-model="queryParams.globalItemSku" placeholder="请输入全球货号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="opt-panel" :class="{'opt-panel-fixed': isFixed }" ref="optPanel">
      <el-row :gutter="10" class="">
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="multiple" @click="getPriceList">
            刷新价格
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-s-promotion" size="small" :disabled="multiple"
                     @click="changePrice">
            修改价格
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <span class="text-danger">必须有折扣才能改价格！</span>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="loading" ref="dataTable" border :data="productList" @row-click="handleRowClick"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" fixed align="center"/>
      <el-table-column v-if="false" label="id" align="center" prop="globalItemId"/>
      <el-table-column label="名称" align="center" prop="globalItemName">
        <template slot-scope="scope">
          <div class="two-line-text">
            {{ scope.row.globalItemName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.imageMini" :src="scope.row.imageMini" class="item-image"/>
        </template>
      </el-table-column>
      <el-table-column label="进价" align="center" prop="globalItemSku"/>
      <el-table-column label="价格配置" width="960">
        <template slot-scope="scope">
          <el-table :data="scope.row.prices" :show-header="false" style="width: 100%">
            <el-table-column label="发布设置">
              <template slot-scope="sub">
                <div class="price-cell">
                  <p>全球：<label>{{ sub.row.globalPrice }}</label>&nbsp;元</p>
                  <div class="price-cell-row">
                    <label>价格：</label>
                    <el-input type="text" size="mini" style="width: 60px" v-model="sub.row.origenPrice"
                              @change="handleChange(scope.$index, sub.row, sub.$index)"/>
                  </div>
                  <div class="price-cell-row">
                    <label>重量：</label>
                    <el-input type="text" size="mini" style="width: 60px" v-model="sub.row.weight"
                              @change="handleChange(scope.$index, sub.row, sub.$index)"/>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格列表" width="810">
              <template slot-scope="sub">
                <div class="site-cell">
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'MY')"
                            :type="getTypeVal(publishedList[scope.$index],'MY')">马来
                    </el-tag>
                    <div v-if="!!sub.row.my" class="tooltip-text">{{ sub.row.my }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'PH')"
                            :type="getTypeVal(publishedList[scope.$index],'PH')">菲律宾
                    </el-tag>
                    <div v-if="!!sub.row.ph" class="tooltip-text">{{ sub.row.ph }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'TW')"
                            :type="getTypeVal(publishedList[scope.$index],'TW')">台湾
                    </el-tag>
                    <div v-if="!!sub.row.tw" class="tooltip-text">{{ sub.row.tw }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'BR')"
                            :type="getTypeVal(publishedList[scope.$index],'BR')">巴西
                    </el-tag>
                    <div v-if="!!sub.row.br" class="tooltip-text">{{ sub.row.br }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'TH')"
                            :type="getTypeVal(publishedList[scope.$index],'TH')">泰国
                    </el-tag>
                    <div v-if="!!sub.row.th" class="tooltip-text">{{ sub.row.th }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'SG')"
                            :type="getTypeVal(publishedList[scope.$index],'SG')">新加坡
                    </el-tag>
                    <div v-if="!!sub.row.my" class="tooltip-text">{{ sub.row.my }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'CO')"
                            :type="getTypeVal(publishedList[scope.$index],'CO')">哥伦比亚
                    </el-tag>
                    <div v-if="!!sub.row.co" class="tooltip-text">{{ sub.row.co }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'MX')"
                            :type="getTypeVal(publishedList[scope.$index],'MX')">墨西哥
                    </el-tag>
                    <div v-if="!!sub.row.mx" class="tooltip-text">{{ sub.row.mx }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'CL')"
                            :type="getTypeVal(publishedList[scope.$index],'CL')">智利
                    </el-tag>
                    <div v-if="!!sub.row.cl" class="tooltip-text">{{ sub.row.cl }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'VN')"
                            :type="getTypeVal(publishedList[scope.$index],'VN')">越南
                    </el-tag>
                    <div v-if="!!sub.row.vn" class="tooltip-text">{{ sub.row.vn }}</div>
                  </div>
                  <div class="tooltip-box">
                    <el-tag :effect="getEffectVal(publishedList[scope.$index],'ID')"
                            :type="getTypeVal(publishedList[scope.$index],'ID')">印尼
                    </el-tag>
                    <div v-if="!!sub.row.id" class="tooltip-text">{{ sub.row.id }}</div>
                  </div>
                </div>
              </template>


            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>
<script>
import {getPulishedShop} from "@/api/shop/globalProduct";
import {listAllMerchant} from "@/api/shop/merchant";
import Cookies from "js-cookie";
import {listProducts, changePublishedPrice,getLinePrice} from "@/api/shop/changePrice";

export default {
  name: "changePrice",
  data() {
    return {
      //是否固定
      isFixed: false,
      // 遮罩层
      loading: true,
      //全球商户列表
      merchantList: [],
      //已经发布的列表
      publishedList: [],
      // 选中数组
      ids: [],
      // 选中的数据
      selectedData: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        globalItemId: null,
        merchantId: null,
        globalItemName: null,
        globalItemSku: null,
        globalItemStatus: null,
      },
    };
  },
  beforeCreate() {
  },
  created() {
    this.getMerchantList();
  },
  updated() {
  },
  methods: {
    getEffectVal(publishedList, site) {
      if (!publishedList) return 'plain';
      const item = publishedList.find(pub => pub.shopRegion === site);
      if (item) {
        return item.status === 1 ? 'dark' : 'light';
      }
      return 'plain';
    },
    getTypeVal(publishedList, site) {
      return this.getEffectVal(publishedList, site) === 'dark' ? 'success' : 'info';
    },

    getMerchantList() {
      listAllMerchant().then((response) => {
        this.merchantList = response.data;
        //默认选中
        if (Cookies.get('merchantId')) {
          this.queryParams.merchantId = +Cookies.get('merchantId');
        }
        this.getList();
      });
    },

    listPulishedShop() {
      this.productList.forEach((value, index) => {
        let {merchantId, globalItemId} = value;
        getPulishedShop({merchantId, globalItemId}).then((response) => {
          if ((response.code = "200")) {
            this.$set(this.publishedList, index, response.data);
          }
        });
      });
    },

    /** 查询全球商品列表 */
    getList() {
      this.loading = true;
      listProducts(this.queryParams).then((response) => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.listPulishedShop();
      });
    },


    /** 刷新并加载全球产品及其价格 */
    getPriceList() {
      this.loading = true;
      for (const row of this.selectedData) {
        const tableIndex = this.productList.findIndex(pro => pro.globalItemId === row.globalItemId);
        row.prices.forEach((price, index) => {
          this.handleChange(tableIndex, price, index);
        });
      }
      this.loading = false;
    },

    //发布商品
    changePrice() {
      this.loading = true;
      changePublishedPrice(this.selectedData).then((response) => {
        this.$modal.msgSuccess("发布成功");
        this.getList();
        this.loading = false;
      });
    },

    // 处理文本改变事件
    handleChange(tableIndex, row, index) {
      this.loading = true;
      getLinePrice(row).then((response) => {
        this.$set(this.productList[tableIndex].prices, index, response.data);
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.merchantId) {
        Cookies.set('merchantId', this.queryParams.merchantId);
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.dataTable.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.globalItemId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      this.selectedData = selection;
    },
    handleScroll() {
      // 获取页面滚动的垂直位置
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      // 根据需要固定的位置来切换样式类
      if (scrollTop > 180/* 根据需要固定的位置的像素值 */) {
        this.isFixed = true;
        if (Cookies.get('sidebarStatus') == 0) {
          this.$refs.optPanel.style = 'width: calc(100% - 104px)';
        } else {
          this.$refs.optPanel.style = 'width: calc(100% - 250px)';
        }
      } else {
        this.isFixed = false;
        this.$refs.optPanel.style = null;
      }
    },
  }
  ,
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  }
  ,
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  ,
}
;
</script>
<style lang="scss" scoped>
.two-line-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.opt-panel {
  height: 50px;
  background-color: white;
  border-top-left-radius: 10px; /* 左上角圆滑程度，根据需要调整像素值 */
  border-top-right-radius: 10px; /* 右上角圆滑程度，根据需要调整像素值 */
  box-shadow: 0px 5px 10px 0px rgba(170, 195, 200, 0.5);
  margin-bottom: 0px;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opt-panel-fixed {
  height: 65px;
  position: fixed;
  top: 0;
  z-index: 800; /* 确保它在其他内容上层显示 */
}

.item-image {
  width: 75px;
  height: 75px;
}

.price-cell {
  display: flex;
  flex-direction: column;
}

.price-cell-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.site-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 元素水平方向平均排列 */
}


.tooltip-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0px 10px 25px;
}

.tooltip-box .tooltip-text {
  //visibility: hidden;
  //opacity: 0;
  width: max-content;
  height: 20px;
  background-color: #ffffff;
  color: #818181;
  text-align: center;
  border-radius: 5px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 20px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  border: 1px solid #644d4c;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}

.tooltip-box .tooltip-text::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #818181 transparent;
}


</style>
